<template>
  <Card style="width: 100%" title="工具管理">
    <Form name="user" ref="formRef" :labelCol="labelCol" :wrapperCol="wrapperCol" @finish="formFinish" :initialValues="{}">
      <Row>
        <Col :span="8">
          <FormItem name="labToolName" label="工具名称" initialValue="">
            <Input placeholder="请输入工具名称" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="release" label="版本号" initialValue="">
            <Input placeholder="请输入版本号" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="platform" label="适用平台" initialValue="">
            <Select placeholder="请选择适用平台" style="width: 100%">
              <Option v-for="dict in dict.type.platform" :key="dict.value" :label="dict.label"  :value="dict.value"></Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="5" :offset="19">
          <Button type="primary" @click="handleQuery">
            <Icon name="search" style="margin-top: 3px; margin-right: 5px;" /> 查 询
          </Button>
          <Button style="margin-left: 10px" @click="formReset">
            <Icon name="rollback-outline" style="margin-top: 3px; margin-right: 5px;" /> 重 置
          </Button>
          <!-- <a href="#" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></a> -->
        </Col>
      </Row>
    </Form>

    <!-- 分割线 -->
    <Divider />

    <Button type="primary" style="margin-right: 10px;margin-bottom: 20px;" size="md" @click="clickAdd">
      <Icon name="add"/> 新增
    </Button>

    <Skeleton :loading="loading" :avatar="false" active :paragraph="{ rows: 6 }">
      <Table
        :columns="columns"
        :dataSource="labToolList"
        :bordered="false"
        @change="handleTableChange"
        :pagination="{
          total: total,
          showQuickJumper: true,
          showSizeChanger: true,
         pageSize: queryParams.pageSize,
         current: queryParams.pageNum,
        }">

         <template #render="render">
            <div v-if="render.dataIndex == 'isInCatalog'">
              <span>{{render.record.isInCatalog ? '是' : '否'}}</span>
            </div>
            <div v-else-if="render.dataIndex == 'platform'">
              <dict-tag :options="dict.type.platform" :value="render.record.platform.split(',')"/>
            </div>
            <div v-else-if="render.dataIndex == 'operation'">
              <a href="#" @click.prevent="tblOptForm(render.record)">
                <Icon name="edit" style="margin-top: 4px;" /> 编辑
              </a>
               <a href="#" @click.prevent="deleteClick(render.record.labToolId)">
                <Icon name="delete-can" style="margin-top: 4px;" /> 删除
               </a>
              <!-- <Popconfirm :title="`是否确认删除序号为 ${render.record.labToolId} 的工具信息？`" @confirm.prevent="removeFirm(render.record)">
                <a href="#">删除</a>
              </Popconfirm> -->
            </div>
          </template>
        <template #paginationTotal="props">
          <span>总共{{ props.total }} 条</span>
        </template>
      </Table>
    </Skeleton>

    <tool-add v-if="addModalToggle" :addModalToggle="addModalToggle" @addModalToggle="addModalToggleFun"></tool-add>
    <tool-edit v-if="editModalToggle" :editModalToggle="editModalToggle" :currentRow="currentRow" @editModalToggle="editModalToggleFun"></tool-edit>
  </Card>
</template>

<script>
import { listTool, getTool, delTool, addTool, updateTool } from "@/api/dotool/labtool";
import LabToolAdd from './components/LabToolAdd'
import LabToolEdit from './components/LabToolEdit'
import { Message, Modal } from '@uni/vue';
export default {
    dicts: ['platform'],
    components: {
      'tool-add': LabToolAdd,
      'tool-edit': LabToolEdit
    },
  data() {
    return {
      addModalToggle: false,
      editModalToggle: false,
      loading: true,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      labToolList: [],
      columns: [
        { title: "序号", dataIndex: "labToolId", key: "labToolId" },
        { title: "工具名称", dataIndex: "labToolName", key: "labToolName" },
        { title: "版本号", dataIndex: "release", key: "release" },
        { title: "产品描述", dataIndex: "remark", key: "remark" },
        { title: "适用平台", dataIndex: "platform", key: "platform", width:140},
        // { title: "是否信创在目录", dataIndex: "isDelete", key: "isDelete" },
        { title: "发布时间", dataIndex: "createTime", key: "createTime" },
        {title:"操作", dataIndex:"operation", key:"operation", width:140}
      ],
       // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        labToolName: null,
        release: null,
        platform: null
      },
      currentRow: '11111',
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async removeFirm(record) {
      const rs = await delTool(record.labToolId);
      if (rs.code !== 200) return Message.error({ text: '删除工具信息失败：' + rs.msg });

      Message.success({ text: '删除工具信息完成' });
      this.getList();
    },
    addModalToggleFun() {
      this.addModalToggle = !this.addModalToggle
      this.getList();
    },
     editModalToggleFun() {
      this.editModalToggle = !this.editModalToggle
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.formRef.submit();
    },
    formFinish(formValues) {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        labToolName: formValues.labToolName.trim(),
        release: formValues.release.trim(),
        platform: formValues.platform
      }
      this.getList();
    },
    /** 查询实验室工具列表 */
    getList() {
      this.loading = true;
      listTool(this.queryParams).then(response => {
        if(response.code == 200) {
          this.labToolList = response.rows;
          this.total = response.total;
          this.loading = false;
        }else {
          Message.error({ text: '获取实验室工具信息失败：' + response.msg });
        }
      });
    },
    handleTableChange(p, filters) {
      const { current, pageSize } = p;
      this.queryParams.pageNum = current;
      this.queryParams.pageSize = pageSize;
      this.getList();
      console.log('filters', p, filters);
    },
    onSearch(value, e) {
      console.log("value", value, e);
    },
    clickAdd() {
      //  this.$router.push('/manageToolForm')
      this.addModalToggle = true;
    },
    tblOptForm(row) {
      this.currentRow = row
      this.editModalToggle = true;
    },
    formReset(value) {
      console.log(value)
      this.$refs.formRef.reset();
    },
     /** 删除按钮操作 */
    deleteClick(roleIds) {
       Modal.confirm({
          title: '确认删除？',
          content: '是否确认删除工具编号为"' + roleIds + '"的数据项？',
          onOk: () => {
            delTool(roleIds).then(
              ()=>{
                this.getList();
               Message.success({ text: "删除成功" });
              }
            );
          },
          onCancel: () => {},
        }
      );
    },
  },
};
</script>


